<template>
  <div>
    <TopBar />
    <el-tabs :tab-position="tabPosition">
      <el-tab-pane label="有品推荐">
        <Content />
      </el-tab-pane>
      <el-tab-pane label="手机数码">
        2
        <Content />
      </el-tab-pane>
      <el-tab-pane label="家用电器">
        3
        <Content />
      </el-tab-pane>
      <el-tab-pane label="智能家庭">
        4
        <Content />
      </el-tab-pane>
      <el-tab-pane label="美食酒饮">
        5
        <Content />
      </el-tab-pane>
      <el-tab-pane label="家具家装">
        6
        <Content />
      </el-tab-pane>
      <el-tab-pane label="电脑办公">
        7
        <Content />
      </el-tab-pane>
      <el-tab-pane label="出行车品">
        8
        <Content />
      </el-tab-pane>
      <el-tab-pane label="服装配饰">
        9
        <Content />
      </el-tab-pane>
      <el-tab-pane label="运动户外">
        10
        <Content />
      </el-tab-pane>
      <el-tab-pane label="健康保健">
        11
        <Content />
      </el-tab-pane>
      <el-tab-pane label="日用文创">
        12
        <Content />
      </el-tab-pane>
      <el-tab-pane label="美妆个护">
        13
        <Content />
      </el-tab-pane>
      <el-tab-pane label="鞋靴箱包">
        14
        <Content />
      </el-tab-pane>
      <el-tab-pane label="家纺餐厨">
        15
        <Content />
      </el-tab-pane>
      <el-tab-pane label="母婴亲子">
        16
        <Content />
      </el-tab-pane>
      <el-tab-pane label="宠物生活">
        17
        <Content />
      </el-tab-pane>
      <el-tab-pane label="有品海购">
        18
        <Content />
      </el-tab-pane>
    </el-tabs>
    <BottomBar />
  </div>
</template>

<script>
import BottomBar from "../components/common/bottomBar";
import TopBar from "../components/class/topBar";
import Content from "../components/class/content";
export default {
  components: {
    BottomBar,
    TopBar,
    Content
  },
  data() {
    return {
      tabPosition: "left"
    };
  }
};
</script>

<style scoped>
.el-tabs {
  margin-top: 0.45rem;
}
.el-tabs >>> .el-tabs__item {
  height: 0.5rem !important;
}
.el-tabs >>> .is-active {
  color: rgb(230, 170, 92) ;
  cursor: pointer;
}

/* .el-tabs__active-bar{
  color: rgb(230, 170, 92) !important;
} */

</style>